<template>
  <div>
    <div class="seach">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-input
            v-model="formInline.inp"
            placeholder="输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名"> </el-table-column>
      <el-table-column prop="age" label="年龄"> </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
      <el-table-column prop="like" label="爱好"> </el-table-column>
      <el-table-column prop="address" label="地址"> </el-table-column>
    </el-table>
    <el-pagination
      background
      @prev-click="Upprev"
      @next-click="Unnext"
      layout="prev, pager, next"
      :page-size="4"
      :current-page="currentPage4"
      :hide-on-single-page="true"
      :total="this.list.length"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      list: [],
      currentPage4: 1,

      formInline: {
        inp: "",
      },
    };
  },
  mounted() {
    this.postData();
  },
  methods: {
    async postData() {
      const res = await this.$axios.post("/api/list");
      this.list = res.data.list.filter(item=>item.sex=="01"?item.sex="男":item.sex="女");

      this.tableData = res.data.list.slice(0, 4);
    },
    Upprev(val) {
      this.tableData = this.list.slice((val - 1) * 4, val * 4);
    },
    Unnext(val) {
      this.tableData = this.list.slice((val - 1) * 4, val * 4);
    },
    onSubmit() {
      let str = this.formInline.inp;
      console.log(str);
      if (str === "") {
        this.tableData = this.list.slice(0,4);
      } else {
        this.tableData = this.list.filter(item=>item.name.includes(str))
      }
    },
  },
};
</script>

<style>
.seach {
  width: 500px;
  display: flex;
}
</style>